<template>
  <div>
    <van-nav-bar :border="false" fixed>
      <span slot="title">排行榜</span>
      <img
        slot="left"
        src="~assets/image/arrow_left.png"
        width="20"
        height="20"
        @click="leftClick"
      />
    </van-nav-bar>
    <div class="income">
      <div class="income-item item1">
        <div>
          <div>
            <img src="~assets/logo.png" width="75" height="75" alt="" />
            <img
              class="income-item-xin"
              src="../../assets/image/img_income_xin.png"
              width="72"
              height="15"
              alt=""
            />
          </div>
          <p>{{ item1List[1].name }}</p>
          <p>{{ item1List[1].phone }}</p>
          <p>{{ item1List[1].rebate }}</p>
          <p class="lei">累计收益</p>
        </div>
      </div>
      <div class="income-item itemt">
        <div>
          <div>
            <img src="~assets/logo.png" width="85" height="85" alt="" />
            <img
              class="income-item-xin"
              src="../../assets/image/img_income_xin.png"
              width="72"
              height="15"
              alt=""
            />
          </div>
          <p>{{ item1List[0].name }}</p>
          <p>{{ item1List[0].phone }}</p>
          <p>{{ item1List[0].rebate }}</p>
          <p class="lei">累计收益</p>
        </div>
      </div>
      <div class="income-item item2">
        <div>
          <div>
            <img src="~assets/logo.png" width="62" height="62" alt="" />
            <img
              class="income-item-xin"
              src="../../assets/image/img_income_xin.png"
              width="72"
              height="15"
              alt=""
            />
          </div>
          <p>{{ item1List[2].name }}</p>
          <p>{{ item1List[2].phone }}</p>
          <p>{{ item1List[2].rebate }}</p>
          <p class="lei">累计收益</p>
        </div>
      </div>
    </div>
    <div class="income-user">
      <p>{{ itemList.name }}</p>
      <p class="getranking">{{ getRanking }}</p>
    </div>

    <div class="initItem" v-for="item in item2List" :key="item.ranking">
      <div class="initItem-left">
        <span>{{ item.ranking }}</span>
        <img src="~assets/logo.png" alt="" width="38" height="38" />
        <div>
          <p class="initItem-name">{{ item.name }}</p>
          <p class="initItem-phone">{{ item.phone }}</p>
        </div>
      </div>
      <div class="initItem-right">
        <p class="initItem-moeny">{{ item.rebate }}</p>
        <p class="initItem-text">累计收益 (元)</p>
      </div>
    </div>
  </div>
</template>
<script>
import { queryIncomeRankingInfoApi } from "network/ApiServe";

export default {
  created() {
    this.userId = localStorage.getItem("userId");
    this.brandId = localStorage.getItem("brandId");
  },
  computed: {
    getRanking() {
      return this.itemList.ranking <= 100 ? this.itemList.ranking : "未上榜";
    },
  },
  data() {
    return {
      itemList: {},
      item1List: [],
      item2List: [],
    };
  },
  mounted() {
    this.getIncomeRankingInfo();
  },
  methods: {
    leftClick() {
      this.$router.back(-1);
    },
    getIncomeRankingInfo() {
      queryIncomeRankingInfoApi(this.userId, this.brandId)
        .then((res) => {
          console.log(res);

          if (res.resp_code == "000000") {
            if (res.result != null) {
              res.result.filter((item, index) => {
                //   前三名
                if (index < 3) {
                  this.item1List.push(item);
                }
                //后七名
                if (index > 2 && index < res.result.length - 1) {
                  this.item2List.push(item);
                }
                //最后一个
                if (index === res.result.length - 1) {
                  return (this.itemList = item);
                }
              });
            }

            console.log(this.item1List);
            console.log(this.item2List);
            console.log(this.itemList);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.van-nav-bar {
  background-color: #000;
  color: #fff;
}
.van-nav-bar span {
  color: #F1CE8A;
}
.income {
  margin-top: 46px;
  height: 350px;
  background-color: #000;
  background-image: url("../../assets/image/img_income_bg.png");
  background-repeat: no-repeat;
  background-size: inherit;
  background-position: inherit center;
  background-position: bottom center;
  transition: background-image 3s;
  display: flex;
  justify-content: center;
  justify-items: center;
}
.income-item {
  flex: 1;
  text-align: center;
  color: #F1CE8A;
  font-size: 14px;
}
.income-item-xin {
  position: relative;
  top: -24px;
}

.income-item p {
  margin-top: 10px;
}
.item1 {
  margin-top: 58px;
}
.item2 {
  margin-top: 86px;
}
p.lei {
  color: #B89A60;
}
.income-user {
  display: flex;
  justify-content: space-between;
  background: #fff;
  line-height: 30px;
  font-size: 16px;
  padding: 10px 20px;
  margin-bottom: 18px;
}
.getranking {
  color: #444;
}
.initItem {
  margin-top: 2px;
  background-color: #fff;
  font-size: 16px;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.initItem-left {
  display: flex;
  align-items: center;
}
.initItem-left span {
  width: 10px;
}
.initItem-left img {
  margin-left: 20px;
  margin-right: 14px;
}
.initItem-name {
  font-size: 17px;
  color: #121212;
  margin-left: 2px;
}
.initItem-phone {
  margin-top: 5px;
  font-size: 13px;
  color: #8D8D8D;
}
.initItem-right {
  text-align: end;
}
.initItem-moeny {
  font-size: 16px;
  color: #121212;
  margin-bottom: 2px;
}
.initItem-text {
  font-size: 13px;
  color: #BEBEBE;
}
</style>